@import url('https://fonts.googleapis.com/css2?family=Fredoka+One:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Hanalei+Fill&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ruslan+Display&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  /* Hide scrollbar for Chrome, Safari and Opera */
  .noScrollbar::-webkit-scrollbar {
    display: none;
  }

  /* Hide scrollbar for IE, Edge and Firefox */
  .noScrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
}

.colorInput {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  cursor: pointer;
  border: none;
  border-radius: 4px;
}

.colorInput::-webkit-color-swatch-wrapper {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  border-radius: 4px;
}

.colorInput::-webkit-color-swatch {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  border-radius: 4px;
}

body {
  overflow: hidden;
}

.btn:not(.btn-primary):hover {
  color: #ffffff80;
  background-color: oklch(var(--n, var(--n)) / var(--tw-bg-opacity));
  border-color: oklch(var(--n, var(--n)) / var(--tw-border-opacity));
}

.radial-progress:hover::after {
  opacity: 0.5;
}

.radial-progress:hover::before {
  opacity: 0.5;
}
